<template>
  <div class="adminHandle" >
    <h3>公告管理</h3>
    <div class="showMsg">
      <div class="tableList">
        <template>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="公告标题">
                    <span>{{ props.row.noticeTitle}}</span>
                  </el-form-item>
                  <el-form-item label="公告正文">
                    <span>{{ props.row.notice}}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              prop="noticeTitle"
              label="公告标题"
              width="800px">
            </el-table-column>
            <el-table-column
              prop="auditTime"
              label="编辑时间"
              width="300px">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="danger" @click.native.prevent="deleteRow(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div style="margin: 10px 0px"><el-button type="primary" plain @click="toEdit">新增公告</el-button></div>
        <el-input placeholder="请输入公告标题" v-model="addData.noticeTitle" v-show="isEdit"></el-input>
        <el-input placeholder="请输入公告正文" type="textarea" v-model="addData.notice" v-show="isEdit"></el-input>
        <div style="margin: 10px 0px" v-show="isEdit">
          <el-button type="primary" plain @click="submitAnnounce">公告发布</el-button>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
  import axios from 'axios'

export default {
  name: "HostAnnounce",
  data(){
    return{
      isEdit:false,
      addData:{
        aid:1,
        noticeTitle:'',
        notice:""
      },
      tableData:[],
      tableDataLength:0
    }
  },
  methods: {
    deleteRow(index, rows) {
      axios.defaults.headers.common["token"] = this.token;
      axios.delete((this.ip + '/bulletin/' + rows.id)).then((response)=>{
        console.log(response)
        console.log(response.data)

      }).catch(function (error) {
        console.log(error);
      });
      this.tableData = undefined
      this.tableData = new Array()
      axios.defaults.headers.common["token"] = this.token;
      axios.get((this.ip + '/bulletin/')).then((response)=>{
        for(let i=0;i<response.data.length;i++) {
          this.tableData.push({
            id:response.data[i].id,
            auditTime: response.data[i].auditTime,
            noticeTitle: response.data[i].noticeTitle,
            notice: response.data[i].notice
          })
        }
      }).catch(function (error) {
        console.log(error);
      });

    },
    toEdit(){
      this.isEdit = true
    },
    submitAnnounce(){
      this.isEdit = false

      axios.defaults.headers.common["token"] = this.token;
      axios.post((this.ip + '/bulletin/'),this.addData,{headers: {'Content-Type':'application/json'}}).then((response)=>{
        console.log(response)
        console.log(response.data)

      }).catch(function (error) {
        console.log(error);
      });

      axios.defaults.headers.common["token"] = this.token;

      this.tableData = undefined
      this.tableData = new Array()
      axios.get((this.ip + '/bulletin/')).then((response)=>{
        console.log(response)
        console.log(response.data)
        for(let i=0;i<response.data.length;i++) {
          this.tableData.push({
            id:response.data[i].id,
            auditTime: response.data[i].auditTime,
            noticeTitle: response.data[i].noticeTitle,
            notice: response.data[i].notice
          })
        }
      }).catch(function (error) {
        console.log(error);
      });
    }
  },
  watch:{
  },
  mounted(){
    this.ip = localStorage.getItem('ip');
    this.token = sessionStorage.getItem('token');

    axios.defaults.headers.common["token"] = this.token;
    axios.get((this.ip + '/bulletin/')).then((response)=>{
      console.log(response)
      console.log(response.data)
      for(let i=0;i<response.data.length;i++) {
        this.tableData.push({
          id:response.data[i].id,
          auditTime: response.data[i].auditTime,
          noticeTitle: response.data[i].noticeTitle,
          notice: response.data[i].notice
        })
      }
        //
        // for(let i=0;i<=this.tableDataLength;i++){
        //   axios.defaults.headers.common["token"] = this.token;
        //   axios.get((this.ip + '/bulletin/' + (i+1))).then((response)=>{
        //     console.log(response)
        //     console.log(response.data)
        //     this.tableData[i].notice = response.data.notice
        //   }).catch(function (error) {
        //     console.log(error);
        //   })
        // }

    }).catch(function (error) {
      console.log(error);
    });


  }
}
</script>


<style scoped>
.adminHandle{
  width: 100%;
  padding: 5px 10px 0px 10px;
  margin: 20px 100px 0px 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);

}
</style>

